<template>
  <div id="stuScoreCharts">
    <globle-linear-border>
      <select-header @on-reload="onReload"></select-header>
    </globle-linear-border>

    <div class="main-box">
      <main>
        <section>
          <globle-linear-border class="left-top-box">
            <div v-if="isShow" id="scorePass"></div>
            <article v-else>暂无数据</article>
          </globle-linear-border>
          <globle-linear-border class="left-top-box">
            <div v-if="isShow" id="levelScale"></div>
            <article v-else>暂无数据</article>
          </globle-linear-border>
          <globle-linear-border class="left-top-box">
            <div v-if="isShow" id="scoreRadar"></div>
            <article v-else>暂无数据</article>
          </globle-linear-border>
        </section>
        <globle-linear-border class="left-bottom-box">
          <div v-if="isShow" id="perExamScore"></div>
          <article v-else>暂无数据</article>
        </globle-linear-border>
      </main>
      <aside>
        <globle-linear-border class="right-box">
          <per-exam-rank v-if="isShow && chartData" :data="chartData.perScoreList" id="perExamRank"></per-exam-rank>
          <article v-else>暂无数据</article>
        </globle-linear-border>
      </aside>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue';
import echarts from '../../../echarts';
import { initPerExamScore } from './chartsInit/perExamScore';
import { initScorePass } from './chartsInit/scorePass';
import { initScoreRadar } from './chartsInit/scoreRadar';
import { initLevelScale } from './chartsInit/levelScale';
import { IThemeColor, IScoreAnalyseByStu } from '../../../type/index';
import SelectHeader from './components/SelectHeader.vue';
import PerExamRank from './components/PerExamRank.vue';
import { useThemeStore } from '../../../store/theme';
import { nextTick } from 'vue';

const isShow = ref(true);
const themeStore = useThemeStore();
const chartData = ref<IScoreAnalyseByStu>();
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
const isCloseMenu = ref<boolean>(themeStore.isColseMenu);

themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

const initAllCharts = async () => {
  const data = chartData.value;
  if (!data) return;
  
  initScoreRadar(echarts, document.querySelector('#scoreRadar') as HTMLElement, data.lineYList, data.lineXList, data.aveScore, themeColor.value);
  initLevelScale(echarts, document.querySelector('#levelScale') as HTMLElement, data.pieValueList, data.pieLabelList, themeColor.value);
  initScorePass(echarts, document.querySelector('#scorePass') as HTMLElement, data.passRate, themeColor.value);
  initPerExamScore(echarts, document.querySelector('#perExamScore') as HTMLElement, data.lineYList, data.lineXList, themeColor.value);
};

const disposeAllCharts = () => {
  if(document.querySelector('#scoreRadar')) echarts.dispose(document.querySelector('#scoreRadar') as HTMLElement);
  if(document.querySelector('#levelScale')) echarts.dispose(document.querySelector('#levelScale') as HTMLElement);
  if(document.querySelector('#scorePass')) echarts.dispose(document.querySelector('#scorePass') as HTMLElement);
  if(document.querySelector('#perExamScore')) echarts.dispose(document.querySelector('#perExamScore') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

const onReload = (data: IScoreAnalyseByStu) => {
  if(!data.perScoreList) {
    disposeAllCharts(); //销毁之前的实例
    isShow.value = false;
    return;
  }else {
    isShow.value = true;
    chartData.value = data;
    disposeAllCharts(); //销毁之前的实例
    nextTick(() => {
      initAllCharts(); //重新创建
    })
  }
};
</script>

<style lang="scss" scoped>
#stuScoreCharts {
  height: 100%;
  padding: 14px 32px;
  .main-box {
    padding-top: 16px;
    height: calc(98% - 70px);
    display: flex;
    justify-content: space-between;
    // border: 2px solid red;

    article {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 22px;
        letter-spacing: 2px;
        opacity: 0.3;
      }

    main {
      width: 75%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 2px solid black;

      section {
        display: flex;
        justify-content: space-between;
        height: 48%;
        // border: 2px solid orange;

        .left-top-box {
          position: relative;
          width: 32%;
          #scoreRadar,
          #levelScale,
          #scorePass {
            width: 100%;
            height: 100%;
          }
        }
      }

      .left-bottom-box {
        height: 50%;
        position: relative;
        #perExamScore {
          width: 100%;
          height: 100%;
        }
        // border: 2px solid blue;
      }
    }

    aside {
      width: 23%;
      // border: 2px solid orange;
      .right-box {
        height: 100%;
        position: relative;
        #perExamRank {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
